import React from "react";
import { Carousel } from "antd";
import product1 from "../../statics/images/product1.jpeg";
import product2 from "../../statics/images/product2.jpeg";
import product3 from "../../statics/images/product3.jpeg";
import "./index.less";

const CAROUSEL_DATA = [
  {
    // title: "Welcome to Henan Yunchi Machinery Equipment Co., Ltd.",
    // description: "your trustworthy partner in innovative mechanical solutions. Located in Luohe, Henan, China, our 3,000 square meter factory combines R&D, design and manufacturing expertise to provide high-performance equipment for the construction, agriculture and animal husbandry industries.",
    img: 'http://47.115.148.248:9000/officeweb/a01_20250325100037.jpg',
  },
  {
    // title: "TELESCOPIC HANDLERS",
    // description: "Tough to beat for comfort, strength and performance",
    img: 'http://47.115.148.248:9000/officeweb/a02_20250325100047.jpg',
  },
  {
    // title: "MINI EXCAVATORS",
    // description: "The world’s number one choice",
    img: 'http://47.115.148.248:9000/officeweb/a03_20250325100051.jpg',
  },
  {
    // title: "MINI EXCAVATORS",
    // description: "The world’s number one choice",
    img: 'http://47.115.148.248:9000/officeweb/a04_20250325100055.jpg',
  },
];

const Item = (props) => {
  const { index, img, title, description, isOnly } = props;
  return (
    <div key={index} className="projectItem" onClick={() => {}}>
      <img src={img} className='imgStyle' />
      {/*<div className="descriptionWrap">*/}
      {/*  <div className="title">{title}</div>*/}
      {/*  {description && <div className="description">{description}</div>}*/}
        {/*{!isOnly && (*/}
        {/*  <a className="knowMoreWrap" href="/discoverMore">*/}
        {/*    <span className="knowMore">Know more</span>*/}
        {/*  </a>*/}
        {/*)}*/}
      {/*</div>*/}
    </div>
  );
};

export default function CarouselProduct(props) {
  const { isOnly, title } = props;

  if (isOnly) {
    return (
      <div className="productsWrap">
        <Item title={title} index={0} img={product1} isOnly={isOnly} />
      </div>
    );
  }

  return (
    <div className="productsWrap">
      <Carousel autoplay={true}>
        {CAROUSEL_DATA.map((item, index) => {
          return <Item {...item} index={index} />;
        })}
      </Carousel>
    </div>
  );
}
